<template>
    <div class="bobxxxssw">
        <!-- 下面第一个图表 -->
        <div id="main3"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    components: {},
    data() {
        return {
            filteredChengZhengData:[],
            filteredQiYiData:[],
            chengZhengData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            qiYiData: [], // 初始化为空数组，动态生成数据
        };
    },
    created() {
        this.generateRandomData();
    },
    // mounted() {
    //     this.initCharts();
    // },
    methods: {
        // 根据规则生成随机数据
        generateRandomData() {
            const randomInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

            const data = [];
            for (let i = 0; i < 12; i++) {
                if (i === 0 || i === 1 || i === 11) {
                    // 12月、1月、2月：50以内
                    data.push(randomInRange(10, 50));
                } else if (i === 2) {
                    // 3月：100-150左右
                    data.push(randomInRange(100, 150));
                } else if (i >= 3 && i <= 9) {
                    // 4月到10月：300-900之间波动
                    data.push(randomInRange(300, 900));
                } else if (i === 10) {
                    // 11月：100以内
                    data.push(randomInRange(10, 100));
                }
            }
            
            this.qiYiData = data;
        },

        // 获取当前时间对应的月份索引
        getCurrentMonthIndex() {
            const currentDate = new Date(); // 当前日期
            const currentMonth = currentDate.getMonth(); // 当前月份（0-11）
            return currentMonth; // 返回当前月份索引
        },

        // 根据当前月份筛选数据
        getFilteredData() {
            const currentMonthIndex = this.getCurrentMonthIndex(); // 获取当前月份索引
            const filteredChengZhengData = this.chengZhengData.slice(0, currentMonthIndex + 1); // 截取前几个月份
            const filteredQiYiData = this.qiYiData.slice(0, currentMonthIndex + 1); // 截取前几个月的数据
            return { filteredChengZhengData, filteredQiYiData };
        },

        // 柱状图初始化
        initCharts() {
            var myChart = echarts.init(document.getElementById("main3"));
            window.addEventListener("resize", () => {
                myChart.resize();
            });

            const { filteredChengZhengData, filteredQiYiData } = this.getFilteredData();
            this.filteredChengZhengData = filteredChengZhengData
            this.filteredQiYiData = filteredQiYiData



            var option = {
                tooltip: {
                    show: true,
                    formatter: "{b}:{c}"
                },
                grid: {
                    left: '5%',
                    top: '12%',
                    right: '1%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                        alignWithLabel: false,
                        length: 5,
                    },
                    splitLine: {
                        show: false
                    },
                    inverse: false,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 30,
                    },
                    data: filteredChengZhengData
                },
                yAxis: [{
                    type: 'value',
                    show: true,
                    position: 'top',
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}笔'
                    }
                }],
                series: [{
                    name: '能耗值',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: {
                                color: 'white'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: 8,
                            color: function (params) {
                                var colorList = [
                                    ['#5470c6', 'rgba(11,42,84,.3)'],
                                    ['#91cc75', 'rgba(11,42,84,.3)'],
                                    ['#fac858', 'rgba(11,42,84,.3)'],
                                    ['#1ace4a', 'rgba(11,42,84, 0.3)'],
                                    ['#73c0de', 'rgba(11,42,84, 0.3)'],
                                    ['#3ba272', 'rgba(11,42,84, 0.3)'],
                                    ['#008c8c', 'rgba(11,42,84, 0.3)'],
                                ];
                                var index = params.dataIndex % colorList.length;
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: colorList[index][0]
                                }, {
                                    offset: 1,
                                    color: colorList[index][1]
                                }]);
                            },
                        },
                    },
                    barGap: '0%',
                    barCategoryGap: '50%',
                    data: filteredQiYiData
                }]
            };
            myChart.setOption(option);
        },
    },
};
</script>

<style>
#main3 {
    height: 300px;
    box-sizing: border-box;
    padding: 5px;
}

.bobxxxssw {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>